I'm trying to make it so that when a range slider is increased from a starting (min) value of 0.5 and an end (max) value of 1 the converted output value decreases from a starting point of 1 (when the slider is at 0.5) and then decreasing to 0 (when the slider is at 1)
Here is what I have tried, currently the start output of the converted number is correct at 1 but when incresing the slider it is supposed to go down not up!
updatefaderval();
function updatefaderval() {
var rangeval = document.getElementById('fader').value;
document.getElementById('faderval').innerText = rangeval;
document.getElementById('convertedval').innerText = convert(rangeval);
}
function convert(inputval) {
var aMin = 0.5;
var aMax = 1;
var bMin = 1;
var bMax = 0;
var aValue = inputval;
var percentage = aValue / ( aMax - aMin );
var outputvalue = bMax - percentage * (bMax - bMin);
console.log(percentage);
return outputvalue;
}<input id="fader" oninput="updatefaderval();" type="range" min="0.5" max="1" step="0.01" value="0.5" style="display:block">
Slider Actual Value: <span style="display:inine-block" id="faderval"></span><br />
Converted Value: <span style="display:inine-block" id="convertedval"></span>As I set the bMin at 1 and the bMax at 0 i thought this would have the desiried output but alas not!
Here is the formula you could use:
updatefaderval();
function updatefaderval() {
var range = document.getElementById('fader');
document.getElementById('faderval').innerText = range.value;
document.getElementById('convertedval').innerText =
convert(+range.value, +range.min, +range.max, 1, 0);
}
function convert(inputval, srcStart, srcEnd, destStart, destEnd) {
return destStart + (inputval - srcStart) * (destEnd - destStart) / (srcEnd - srcStart);
}<input id="fader" oninput="updatefaderval();" type="range" min="0.5" max="1" step="0.01" value="0.5" style="display:block">
Slider Actual Value: <span id="faderval"></span><br>
Converted Value: <span id="convertedval"></span>